<template>
    <div>
        <el-card class="box-card">
            <div slot="header">
                <span>{{ $route.meta.title}}</span>
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="index">

                    <div class="panel-heading">
                        <img :src="form.avatar">
                        <span class="title"><p class="role">{{ form.username}}</p><span
                            class="name">{{ form.role}}</span> </span>
                        <i class="el-icon-edit-outline"
                           style="font-size: 28px; position: absolute; right: 31px; cursor: pointer;"  @click="editUser(form)"> </i>
                    </div>
                    <div class="panel-body">
                        <ul>
                            <li>
                                <el-row :gutter="20">
                                    <el-col :span="6"><i class="fa fa-id-card"></i></el-col>
                                    <el-col :span="12">ID</el-col>
                                    <el-col :span="6">{{ form .id}}</el-col>
                                </el-row>
                            </li>
                            <li>
                                <el-row :gutter="20">
                                    <el-col :span="6"><i class="fa fa-envelope"></i></el-col>
                                    <el-col :span="12">EMAIL</el-col>
                                    <el-col :span="6">{{ form.email }}</el-col>
                                </el-row>
                            </li>
                            <li>
                                <el-row :gutter="20">
                                    <el-col :span="6"><i class="fa fa-female"></i></el-col>
                                    <el-col :span="12">性别</el-col>
                                    <el-col :span="6">女</el-col>
                                </el-row>
                            </li>
                            <li>
                                <el-row :gutter="20">
                                    <el-col :span="6"><i class="fa fa-birthday-cake"></i></el-col>
                                    <el-col :span="12">生日</el-col>
                                    <el-col :span="6">07.05</el-col>
                                </el-row>
                            </li>
                            <li>
                                <el-row :gutter="20">
                                    <el-col :span="6"><i class="fa fa-calendar"></i></el-col>
                                    <el-col :span="12">注册时间</el-col>
                                    <el-col :span="6">{{ form.created_at}}</el-col>
                                </el-row>
                            </li>
                            <li>
                                <el-row :gutter="20">
                                    <el-col :span="6"><i class="fa fa-calendar"></i></el-col>
                                    <el-col :span="12">更新时间</el-col>
                                    <el-col :span="6">{{ form.updated_at}}</el-col>
                                </el-row>
                            </li>
                        </ul>
                    </div>
                </el-tab-pane>
                <UserEdit
                    :title="userEditTitle"
                    :dialogFormVisible="dialogFormVisible"
                    :data="currentEditUser"
                    :roleData="roleData"
                    @val-change="userEditChange"
                    @cancel="dialogFormVisible = false"
                >
                </UserEdit>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>

    import UserEdit from '../userManage/UserEdit';

    export default {
        data() {
            return {
                activeName: 'index',
                form: JSON.parse(localStorage.getItem('userInfo')),
                userEditTitle: '编辑个人信息',
                dialogFormVisible: false,
                roleData: [],
                currentEditUser: false
            }
        },
        methods: {
            editUser(data) {
                if (data) {
                    data.actived = data.actived.toString();
                    this.currentEditUser = data;
                    this.currentEditUser.roleData = this.currentEditUser.role
                } else {
                    this.currentEditUser = false;
                }
                this.dialogFormVisible = true;
            },
            userEditChange(data) {
                let self = this;
                self.$Api.updateUser(data, (c) => {
                    if (c.code == 200) {
                        this.dialogFormVisible = false;
                        this.refresh = !this.refresh;
                        self.$notify({
                            title: self.userEditTitle + '成功！, 请重新登录',
                            message: c.data,
                            type: 'success'
                        });
                        this.$router.push('/admin/login');
                    } else {
                        self.$notify({
                            title: self.userEditTitle + '失败！',
                            message: c.data,
                            type: 'error'
                        });
                    }
                });

            }
        },

        mounted: function () {
            let APP = this;
            //获取角色数据
            APP.$Api.getRoleList({}, (c) => {
                if (c.code == 200) {
                    APP.roleData = c.data;
                } else {
                    APP.$notify({
                        title: '请求角色列表失败',
                        message: c.data,
                        type: 'error'
                    });
                }

            })
        },


        components: {
            UserEdit
        }
    }
</script>
<style lang="less">
    .box-card {
        border-radius: 0;
        .panel-heading {
            display: flex;
            text-align: left;
            width: 100%;
            border-bottom: 1px solid #eeeff1;
            padding: 15px;
            font-weight: bold;
            img {
                margin-right: 15px;
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
            .title {
                display: flex;
                flex-direction: column;
                justify-content: center;
                .name {
                    color: #367fa9;
                    font-size: 18px;
                }
                .role {
                    color: #99a9c0;
                }
            }
        }
        .panel-body {
            color: #3c8dbc;
            ul {
                li {
                    border-bottom: 1px solid #eeeff1;
                    padding: 0 15px;
                    height: 45px;
                    line-height: 45px;
                }
            }
        }
    }
</style>
